<template>
    <div class="main_box" style="padding-right:10px">
        <div class="add_wrap">
            <div class="tit">
              <h2>{{dataForm.smokeId?'编辑烟雾报警器':'新增烟雾报警器'}}</h2>
              <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
            </div>
            <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
                <el-row>
                    <el-form-item label="烟雾报警器名称" prop="equipName">
                        <el-input v-model="dataForm.equipName" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="烟雾报警器昵称" prop="equipNickName">
                        <el-input v-model="dataForm.equipNickName" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="烟雾报警器类型" prop="smokeType">
                      <el-select   v-model="dataForm.smokeType" clearable filterable>
                          <el-option v-for="item in smokeTypeList" :key="item.id" :value="item.id" :label="item.name">
                          </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="厂家" prop="factoryId">
                        <el-select v-model="dataForm.factoryId" clearable filterable>
                            <el-option v-for="item in factoryList" :key="item.id" :value="item.id" :label="item.name">

                            </el-option>
                        </el-select>
                     </el-form-item>
                    <el-form-item label="MAC地址" prop="equipMac">
                        <el-input v-model="dataForm.equipMac" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="安装区域" prop="installArea">
                        <el-select allow-create clearable filterable v-model="dataForm.installArea">
                            <el-option v-for="item in installAreaList" :label="item.label" :value="item.value" :key="item.value">

                            </el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="呼叫器" prop="beeperId">
                        <el-select v-model="dataForm.beeperId" clearable filterable :filter-method="selectBeeperSearch">
                            <el-option v-for="item in beeperList" :key="item.id" :value="item.id" :label="item.name">

                            </el-option>
                        </el-select>
                     </el-form-item>
                    <el-form-item label="备注">
                      <el-input type="textarea" v-model="dataForm.remark"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                      <el-form-item>
                      <el-button plain type="primary" @click="sureClick">保 存</el-button>
                      <el-button plain @click="returnList">取 消</el-button>
                      </el-form-item>
                </el-row>
            </el-form>
        </div>
    </div>
  </template>

  <script>
  import * as message from "@/constants/message";
  import SmokeApi from '@/api/equip/smoke';
  import BeeperApi from "@/api/equip/beeper"
  import FactoryApi from "@/api/system/factory"
  export default {
      name:"SmokeAdd",
      data(){
          return{
              dataForm:{
                smokeId:"",
                equipName:"",
                equipNickName:"",
                smokeType:1,
                equipMac:"",
                installArea:"",
                beeperId:"",
                factoryId:"",
                remark:"",
              },
              smokeTypeList:[//烟雾报警器类型列表
                  {id:1,name:"NB-IoT"},
                  {id:2,name:"WIFI"},
                  {id:3,name:"网关"}
              ],
              installAreaList:[
                {label:"入户门",value:"入户门"},
                {label:"玄关",value:"玄关"},
                {label:"客厅",value:"客厅"},
                {label:"厨房",value:"厨房"},
                {label:"阳台",value:"阳台"},
                {label:"洗手间",value:"洗手间"},
                {label:"卧室",value:"卧室"},
                {label:"书房",value:"书房"},
              ],
              beeperList:[],
              factoryList:[],
              roleRules: {
                /*equipName:[
                    { required: true, message: "请输入烟雾报警器名称", trigger: "blur" },
                ],*/
                smokeType: [
                    { required: true, message: "请选择烟雾报警器类型", trigger: "change" },
                ],
                equipMac:[
                    { required: true, message: "请输入MAC地址", trigger: "blur" },
                ],
                // beeperId: [
                //     { required: true, message: "请选择呼叫器", trigger: "change" },
                // ],
              },
          }
      },
      mounted(){
        this.init();
      },
      methods:{
        init(){
            this.getFactoryList()
            if(this.$route.query.id){
                this.dataForm.smokeId = this.$route.query.id
                this.getData()
            }
        },
        keydown(e) {
            if (e.keyCode == 32) {
                e.returnValue = false;
            }
        },

        getData(){
            var cond ={
                id: this.dataForm.smokeId
            }
            SmokeApi.getSmokeInfo(cond)
            .then(res =>{
                this.$Utils.bindingBean(this.dataForm, res.data)
                this.getBeeperList(res.data.beeperName)
            })
        },
           // 获取呼叫器列表
           getBeeperList(name) {
            BeeperApi.beeperList({
                value: name
            }).then(res => {
                this.beeperList = res.data
            })
        },
        async getFactoryList(){
            const {data} = await FactoryApi.listIdName()
            this.factoryList = data
        },
        sureClick(){
            // 提交
            this.$refs.dataForm.validate(valid =>{
            if(valid) {
                this.$confirm(message.MSG_CONFIRM_SAVE, message.TITLE_PROMPT, {})
                    .then(() => {
                        if(this.dataForm.smokeId){
                            this.editData();
                        }else{
                            this.addData();
                        }
                    });
                }
            })
        },
        editData(){
            // 编辑
            var cond = {
                smokeId:this.dataForm.smokeId,
                equipName:this.dataForm.equipName,
                equipNickName:this.dataForm.equipNickName,
                smokeType:this.dataForm.smokeType,
                equipMac:this.dataForm.equipMac,
                installArea:this.dataForm.installArea,
                beeperId:this.dataForm.beeperId,
                factoryId:this.dataForm.factoryId,
                remark:this.dataForm.remark,
            }
            SmokeApi.editSmoke(cond)
                .then(data =>{
                    this.$Utils.notifySuccess();
                    this.returnList();
                })
        },
        addData(){
            // 新增
            var cond = {
                equipName:this.dataForm.equipName,
                equipNickName:this.dataForm.equipNickName,
                smokeType:this.dataForm.smokeType,
                equipMac:this.dataForm.equipMac,
                installArea:this.dataForm.installArea,
                beeperId:this.dataForm.beeperId,
                factoryId:this.dataForm.factoryId,
                remark:this.dataForm.remark,
            }
            SmokeApi.addSmoke(cond)
                .then(data =>{
                    this.$Utils.notifySuccess();
                    this.returnList();
                })
        },
        returnList(){
            // 返回上一界面
            this.$store.dispatch('delView', this.$route);
            this.$router.push({ path:'/equip/smokeManagement'})
        },
        selectBeeperSearch(e) {
            this.getBeeperList(e)
        }
      }
  }
  </script>

<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
  <style  lang="scss">


  </style>
